<template>
  <div :class="$style.wrap">
    <Title title="关怀信息" :title-class="$style.title" style="padding-top:10px"></Title>
    <FormContainer :column="4">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="90px">
        <el-form-item label="满意度" prop="satisfaction">
          <CustomDictSelect
            placeholder="请选择满意度"
            dict-type-code="KQ_SATISFACTION"
            bind-name="dictName"
            bind-value="dictCode"
            :echo-value.sync="formData.satisfaction"
          ></CustomDictSelect>
        </el-form-item>
        <el-form-item prop="careDate" label="实际关怀日期">
          <el-date-picker v-model="formData.careDate" type="date" operator="<" :limite="new Date()" placeholder="选择实际关怀日期" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="任务状态" prop="state">
          <CustomDictSelect
            placeholder="请选择任务状态"
            dict-type-code="KQ_TASK_STATUS"
            bind-name="dictName"
            bind-value="dictCode"
            :echo-value.sync="formData.state"
          ></CustomDictSelect>
        </el-form-item>
        <el-form-item>
          <Button type="primary" @click="submitHandle">保存</Button>
        </el-form-item>
        <el-form-item label="关怀方式" prop="careMode" :span="24">
          <el-checkbox-group v-model="formData.careMode" @change="careModeChange">
            <el-checkbox v-for="(c,i) in careModeList" :key="i" :label="c.dictCode">{{ c.dictName }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </FormContainer>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import Title from '@/components/Title'
import CustomDictSelect from '@/components/CustomDictSelect'
import { deepCopy, parseTime } from '@/utils'
import { ccDict } from '@/api/dataDict'
import { careTaskSave } from '@/api/guestCare'
export default {
  name: 'CareInfo',
  components: {
    FormContainer,
    Title,
    CustomDictSelect
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    const validatorCareMode = (r, v, c) => {
      if (v && v.length > 0) {
        c()
      } else {
        c(new Error('请选择关怀方式'))
      }
    }
    return {
      formData: {
        satisfaction: '',
        careDate: '',
        state: '',
        careMode: [],
        careModeName: ''
      },
      formRules: {
        careDate: [{ required: true, type: 'date', message: '请选择关怀日期', trigger: 'change' }],
        careMode: [{ required: true, type: 'array', message: '请选择关怀方式', trigger: 'change' },
          { required: true, validator: validatorCareMode, trigger: 'change' }]
      },
      careModeList: [
        // { value: 'sms', label: '短信关怀' },
        // { value: 'email', label: '邮件关怀' },
        // { value: 'call', label: '电话关怀' },
        // { value: 'gift', label: '贺卡礼物关怀' }
      ]
    }
  },
  watch: {
    formData: {
      handler() {
        this.$emit('formDataChange', deepCopy(this.formData))
      },
      immediate: true,
      deep: true
    },
    info: {
      handler() {
        this.initFormData()
        this.careModeChange(this.formData.careMode)
      },
      immediate: true
    }
  },
  created() {
    this.getCareMode()
  },
  methods: {
    submitHandle() {
      return this.$refs.form.validate().then(res => {
        const data = deepCopy(this.formData)
        data.careMode = data.careMode.join(',')
        data.id = this.info.id
        data.careDate = parseTime(data.careDate, '{y}-{m}-{d}')
        const formData = new FormData()
        for (const key of Object.keys(data)) {
          formData.append(key, data[key])
        }
        return careTaskSave(formData).then(res => {
          this.$message.success('保存成功！')
          // this.$emit('on-success')
          this.$closePage()
        })
      })
    },
    // 关怀方式变化
    careModeChange(v) {
      if (v instanceof Array) {
        const t = []
        for (const item of v) {
          for (const i of this.careModeList) {
            if (item === i.dictCode) {
              t.push(i.dictName)
            }
          }
        }
        this.$set(this.formData, 'careModeName', t.join(','))
      } else {
        this.$set(this.formData, 'careModeName', '')
      }
      this.$emit('careModeChange', v)
    },
    // 获取关怀方式
    getCareMode() {
      ccDict('CARE_MODE').then(res => {
        this.careModeList = res.data
      })
    },
    // 初始化formData
    initFormData() {
      for (const key of Object.keys(this.formData)) {
        let v = this.info[key]
        if (v === undefined || v === null) {
          continue
        }
        v = this.$numToString(v)
        if (key === 'careMode') {
          this.$set(this.formData, key, v.split(',') || [])
          continue
        }
        if (key === 'careDate') {
          this.$set(this.formData, key, new Date(v))
          continue
        }
        this.$set(this.formData, key, v)
      }
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
.title{
  color: rgba(0,0,0,0.85);
  font-size: 16px;
  font-weight: 700;
}
}
</style>
